import React, { Component } from "react";
import "./completionCredit.scss";
import { Toast, Carousel, Modal } from "antd-mobile";
import copy from "copy-to-clipboard";
import { InterfaceG } from "@config/Config";
import { billReportUrl } from "@/tools/utils";
import yhTools from "@tools/yh";
const modalAlert = Modal.alert;
import { openWebView } from "@tools/native/navigate";
import Banner from "@/views/viewCommon/Banner";
import rightIcon from "@images/xhdArrow.png";
import qicon from "@images/imageXHF/home_question.png";
import index_icon_kaquanzhongxin from "@images/imageXHF/index_icon_kaquanzhongxin.png";
import index_icon_paycode from "@images/imageXHF/index_icon_paycode.png";
import index_icon_xinshouzhuanqu from "@images/imageXHF/index_icon_xinshouzhuanqu.png";
import index_icon_changjianwenti from "@images/imageXHF/index_icon_changjianwenti.png";
import index_icon_tuiguangyouli from "@images/imageXHF/index_icon_tuiguangyouli.png";
import index_icon_yinhangka from "@images/imageXHF/index_icon_yinhangka.png";
import index_icon_guanzhuwo from "@images/imageXHF/index_icon_guanzhuwo.png";
// import billReport from "@images/billReport.png";

//导航菜单
const navs = [
	{
		type: "4",
		name: "银行卡管理",
		icon: index_icon_yinhangka
	},
	{
		type: "5",
		name: "新手专区",
		icon: index_icon_xinshouzhuanqu
	},
	{
		type: "8",
		name: "推广有礼",
		icon: index_icon_tuiguangyouli,
		hidden: true
	},
	{
		type: "2",
		name: "卡券中心",
		icon: index_icon_kaquanzhongxin
	},
	{
		type: "3",
		name: "付款码",
		icon: index_icon_paycode
	},
	{
		type: "6",
		name: "常见问题",
		icon: index_icon_changjianwenti
	},
	// {
	// 	type: "9",
	// 	name: "年度账单",
	// 	icon: billReport,
	// 	classNames: "red"
	// },
	{
		type: "10",
		name: "关注我",
		icon: index_icon_guanzhuwo
	}
];
/**
 * 授信完成组件
 */
class CompletionCredit extends Component {
	constructor(props) {
		super(props);
		this.state = {};
	}
	componentDidMount() {
		this.queryInviteEffect(this.props.inviteActivityResp);
	}
	//原生sdk 1.0.2 以上版本才支持支付宝
	isShowAlipay = () => {
		let versionCode = this.props.getAppPlatformsDatas.sdkVersionCode;
		let num = Number(versionCode.replace(/\./g, ""));
		if (num > 102) {
			return true;
		} else {
			return false;
		}
	};
	/**
	 * 跳转导航页面
	 */
	handleGoPage = type => {
		switch (type) {
			case "1": //红包
				this.jumpPage("cashback");
				break;
			case "2": //卡卷中心
				this.props.history.push({
					pathname: `/paymentDiscount/coupon`
				});
				break;
			case "3": //付款码
				this.goPaymentCode();
				break;
			case "4": //银行卡
				this.jumpPage("bankManageList");
				break;
			case "5": //新手专区
				this.jumpPage("newbornZone");
				break;
			case "6": //常见问题
				this.jumpPage("xhfCommonProblem");
				break;
			case "7": //我的账单
				this.jumpPage("billHome");
				break;
			case "8": //邀请
				this.jumpPage("inviteHome");
				break;
			case "9": //年度账单
				this.jumpPage("iframePage", {
					src: billReportUrl(),
					title: "年度账单"
				});
				break;
			case "10": //关注我
				modalAlert("", "关注“永辉金融”公众号，优惠早知道！", [
					{
						text: "复制公众号",
						onPress: () => {
							copy("永辉金融");
							Toast.success("复制成功，请前往微信中粘贴搜索并关注", 2);
						}
					},
					{
						text: "取消"
					}
				]);
				break;
			default:
				break;
		}
	};
	jumpPage(url, Urlparams) {
		this.props.history.push({
			pathname: `/${url}`,
			state: Urlparams,
			query: {
				from: Urlparams
			}
		});
	}
	/**
	 * 去付款码
	 */
	goPaymentCode() {
		let objs = {
			url: InterfaceG.appBtnPaymentCode,
			params: {
				version: "1.0"
			}
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.code === "0") {
				const pageNo = res.data.pageNo;
				const pageName = res.data.pageName;
				switch (pageNo) {
					case "7": // 7 付款码
						this.jumpPage("payCode", "/xhfHomeCredit");
						break;
					case "8": //8 设置支付密码
						this.props.history.push({
							pathname: "/xhfSetPasswordPage",
							state: {
								gotoNext: "edjh"
							}
						});
						break;
					case "13": //逾期情况
						modalAlert("", pageName, [
							{
								text: "去还款",
								onPress: () => {
									this.jumpPage("billHome");
								}
							}
						]);
						break;
					case "14": //额度不足
						Toast.info(pageName, 2);
						break;
					case "15": //激活页面
						this.jumpPage("xhfFacilitySuccess");
						break;
					default:
						break;
				}
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	handleLink = value => {
		if (value.link) {
			if (value.targetArea === 0) {
				//内部
				this.props.history.push(value.link);
			} else if (value.targetArea === 1) {
				openWebView({ url: value.link });
			} else if (value.targetArea == "2") {
				this.props.history.push({
					pathname: "/iframeAgreements",
					state: {
						src: value.link,
						title: ""
					}
				});
			}
		}
	};
	//点击最低还款
	handleMinimumRepayment = () => {
		let { xhfAmountInfo } = this.props;
		let objs = {
			url: InterfaceG.xhfHomeNextMinRepayment,
			params: {
				titleCode: xhfAmountInfo.titleCode,
				titleAmount:
					xhfAmountInfo.titleCode == "1"
						? xhfAmountInfo.leastRefundAmt
						: xhfAmountInfo.titleAmt
			}
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.code === "0") {
				if (xhfAmountInfo && xhfAmountInfo.titleCode == "1") {
					let obj = {
						fromType: "XHF",
						backPath: "xhfHomeCredit",
						billNo: xhfAmountInfo.billCode,
						billAmount: xhfAmountInfo.leastRefundAmt,
						type: 1, // 1:最低还款、2:立即还款
						rtnDate: xhfAmountInfo.rtnDate,
						showAlipayRepaymentBtn: this.isShowAlipay()
					};
					this.props.history.push({
						pathname: `/xhfRepaymentPage/${JSON.stringify(obj)}`
					});
				}
			} else if (res.code === "1000300" || res.code === "1000400") {
				//当展示的本期应还，点击提前还款时：返回此code，点击继续还款走已出账全额还款
				modalAlert("提示", res.message, [
					{
						text: "取消",
						onPress: () => {}
					},
					{
						text: "继续还款",
						onPress: () => {
							let obj = {
								fromType: "XHF",
								backPath: "xhfHomeCredit",
								billNo: xhfAmountInfo.billCode,
								billAmount: xhfAmountInfo.balanceAndInterestAmount,
								type: 2, // 1:最低还款、2:立即还款
								rtnDate: xhfAmountInfo.rtnDate,
								showAlipayRepaymentBtn: this.isShowAlipay(),
								repayMark: 2
							};
							this.props.history.push({
								pathname: `/xhfRepaymentPage/${JSON.stringify(obj)}`
							});
						}
					}
				]);
			} else if (res.code === "100060") {
				//当展示的下期待还，点击提前还款时：返回此code，提示下期待还不能提前还款，可以点击继续还款，走提前还款逻辑
				//当展示的本期应还，点击提前还款时：返回此code，已经最低还款，不能提前还款，可以点击继续还款，走全额还款逻辑
				modalAlert("提示", res.message, [
					{
						text: "取消",
						onPress: () => {}
					},
					{
						text: "继续还款",
						onPress: () => {
							let obj = {
								fromType: "XHF",
								backPath: "xhfHomeCredit",
								billNo: xhfAmountInfo.billCode,
								billAmount:
									xhfAmountInfo.titleCode == "1"
										? xhfAmountInfo.balanceAndInterestAmount
										: xhfAmountInfo.titleAmt,
								type: xhfAmountInfo.titleCode == "1" ? "2" : "3", // 1:最低还款、2:立即还款、3:提前还款
								rtnDate: xhfAmountInfo.rtnDate,
								showAlipayRepaymentBtn: this.isShowAlipay(),
								repayMark: xhfAmountInfo.titleCode == "1" ? "2" : "1",
								unAccountAmount: xhfAmountInfo.unAccountAmount,
								unRepayAmount: xhfAmountInfo.unRepayAmount
							};
							this.props.history.push({
								pathname: `/xhfRepaymentPage/${JSON.stringify(obj)}`
							});
						}
					}
				]);
			} else if (res.message) {
				modalAlert("提示", res.message, [
					{
						text: "确定",
						onPress: () => {}
					}
				]);
			}
		});
	};
	//点击去还款
	handleGotoRepayment = () => {
		let { xhfAmountInfo } = this.props;
		let objs = {
			url: InterfaceG.xhfHomeNextRepayment,
			params: {
				returnType: xhfAmountInfo.titleCode
			}
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				if (xhfAmountInfo && xhfAmountInfo.titleCode == "1" && res.data) {
					//titleCode：0-下期待还，1-本期应还
					let obj = {
						fromType: "XHF",
						backPath: "xhfHomeCredit",
						billNo: xhfAmountInfo.billCode,
						billAmount: res.data, //取得 xhfAmountInfo.balanceAndInterestAmount
						type: 2, // 1:最低还款、2:立即还款
						rtnDate: xhfAmountInfo.rtnDate,
						showAlipayRepaymentBtn: this.isShowAlipay(),
						repayMark: 2
					};
					this.props.history.push({
						pathname: `/xhfRepaymentPage/${JSON.stringify(obj)}`
					});
				} else if (
					xhfAmountInfo &&
					xhfAmountInfo.titleCode == "0" &&
					res.data
				) {
					let obj = {
						fromType: "XHF",
						backPath: "xhfHomeCredit",
						billNo: xhfAmountInfo.billCode,
						billAmount: res.data, //取得xhfAmountInfo.titleAmt
						type: 3, // 1:最低还款、2:立即还款、3:提前还款
						rtnDate: xhfAmountInfo.rtnDate,
						showAlipayRepaymentBtn: this.isShowAlipay(),
						repayMark: 1,
						unAccountAmount: xhfAmountInfo.unAccountAmount,
						unRepayAmount: xhfAmountInfo.unRepayAmount
					};
					this.props.history.push({
						pathname: `/xhfRepaymentPage/${JSON.stringify(obj)}`
					});
				}
			} else if (res.message) {
				modalAlert("提示", res.message, [
					{
						text: "确定",
						onPress: () => {}
					}
				]);
			}
		});
	};
	handleGoBill = titleCode => {
		if (titleCode === "1") {
			this.jumpPage("billHome", { tableIndex: 0 });
		} else if (titleCode === "0") {
			this.jumpPage("billHome", { tableIndex: 1 });
		}
	};
	//查询邀请是否可用
	queryInviteEffect(inviteActivityResp) {
		let nav = navs.find(item => {
			//找到导航中的推广选项
			return item.type == 8;
		});
		if (inviteActivityResp && inviteActivityResp.flag) {
			nav.hidden = false;
		} else {
			nav.hidden = true;
		}
	}
	render() {
		const {
			xhfAmountInfo,
			isOverDue,
			amtIfLock,
			xhfOpenedIndexBannerFixedImgs,
			xhfOpenedIndexBannerSufferImgs,
			lnid
		} = this.props;
		return (
			<>
				<div className="xhf-new-index-page-top">
					<div className="quota-box">
						<span className="tips-617">
							本月花下月还 | 最长免息35天 | 小辉付·消费贷
						</span>
						{isOverDue === "1" && amtIfLock === "1" && (
							<div className="be-overdue">逾期不可用</div>
						)}
						{isOverDue === "1" && amtIfLock === "0" && (
							<div className="be-overdue">已逾期</div>
						)}
						{isOverDue === "0" && amtIfLock === "1" && (
							<div className="be-overdue">
								信用不足
								<img
									src={qicon}
									alt=""
									onClick={() => this.jumpPage("creditScorePage")}
								/>
							</div>
						)}
						<p className="quota">可用额度（元）</p>
						<p className="quota-num">{xhfAmountInfo.availableAmount}</p>
						{/* <p className="quota-tips">随机立减，这月花下月付</p> */}
						<div className="quota-box-bot">
							<div className="quota-box-bot-left">
								<p
									className="quota-box-bot-title"
									onClick={() => this.handleGoBill(xhfAmountInfo.titleCode)}
								>
									{/* 本期账单(元) */}
									{xhfAmountInfo.title}(元)
									<img
										className="quota-box-bot-title-icon"
										src={rightIcon}
										alt=""
									/>
								</p>
								<p className="quota-box-bot-num">{xhfAmountInfo.titleAmt}</p>
								<p className="quota-box-bot-tips">
									{xhfAmountInfo.titleStatus}
								</p>
								{/* <p
                                    className={
                                        xhfAmountInfo.billStatus === "4"
                                            ? "quota-box-bot-tips isOverdue"
                                            : "quota-box-bot-tips"
                                    }
                                >
                                    {xhfAmountInfo.billStatusName}
                                </p> */}
							</div>
							<div className="quota-box-bot-right">
								<p className="quota-box-bot-title">我的额度(元)</p>
								<p className="quota-box-bot-num">
									{xhfAmountInfo.creditAmount}
								</p>
							</div>
						</div>
						<div className="repayment-btns">
							{/* <div>自动还设置</div> */}
							<div onClick={this.handleMinimumRepayment}>最低还款</div>
							<div onClick={this.handleGotoRepayment}>
								还&nbsp;&nbsp;&nbsp;款
								{this.isShowAlipay() && (
									<span className="nav-item-tip2">支付宝</span>
								)}
							</div>
						</div>
					</div>
				</div>
				<div className="xhf-menu-nav">
					{navs.map(item => {
						return item.hidden ? (
							""
						) : (
							<div
								className="nav-item"
								onClick={() => this.handleGoPage(item.type)}
								key={item.type}
							>
								<img className="nav-item-img" src={item.icon} alt="" />
								<span className={`nav-item-title ${item.classNames}`}>
									{item.name}
								</span>
								{/* {
                                        item.type === '3' && <span className="nav-item-tip">立减</span>
                                    } */}
								{/* {
                                        item.type === '7' && <span className="nav-item-tip2">支付宝</span>
                                    } */}
							</div>
						);
					})}
				</div>
				<h2 className="selected-activities">精选活动</h2>
				<Banner
					bannerList={xhfOpenedIndexBannerSufferImgs}
					history={this.props.history}
				/>
				<div className="activity-img">
					{xhfOpenedIndexBannerFixedImgs &&
						xhfOpenedIndexBannerFixedImgs.length > 0 &&
						xhfOpenedIndexBannerFixedImgs.map((item, index) => {
							return (
								<img
									src={item.imgUrl}
									alt=""
									onClick={() => this.handleLink(item)}
									key={index}
								/>
							);
						})}
				</div>
			</>
		);
	}
}

export default CompletionCredit;
